<template>
  <main class="main">
    <div class="banner">
      <div class="btn-left"></div>
      <ul id="ul-imgs" class="ul-imgs">
        <li>
          <a href="javascript:;">
            <img src="../../assets/image/carousel_item/carousel-1.jpg" />
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="../../assets/image/carousel_item/carousel-2.jpg" />
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="../../assets/image/carousel_item/carousel-3.jpg" />
          </a>
        </li>
        <li>
          <a href="javascript:;">
            <img src="../../assets/image/carousel_item/carousel-4.jpg" />
          </a>
        </li>
        <!-- 注意！最后li个数要比实际图片张数多1，最后一个li里的img时重复第一张li的图片 -->
        <li>
          <a href="javascript:;">
            <img src="../../assets/image/carousel_item/carousel-1.jpg" />
          </a>
        </li>
      </ul>
      <ul class="ul-idxs">
        <!-- 虽然li个数比实际图片张数多1，但小圆点的个数不必多1 -->
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="btn-right"></div>
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
      console.log(this.$refs)
    // this.$refs.input   获取input输入框
    this.$refs;
    // this.$refs.test    获取Test组件实例对象
    // this.$refs.test.$parent    获取Test组件的父组件
    // this.$refs.test.$root    获取根实例对象Vue
    // this.$children   获取当前组件的所有子组件，是一个列表
    // this.$refs        获取所有有ref属性的DOM元素或者组件实例对象
    // for循环遍历
    for (let key in this.$refs) {
      console.log(this.$refs[key]);
    }
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.main {
  width: 1000px;
  margin: 0 auto;
}
.banner {
  width: 1000px;
  overflow: hidden;
  position: relative;
}
.ul-imgs {
  width: 5000px;
  margin-left: 0px;
  list-style: none;
}
.ul-imgs.transition {
  transition: all 0.5s linear;
}
.ul-imgs > li {
  width: 1000px;
  float: left;
}
.ul-imgs img {
  width: 1000px;
}
.ul-idxs {
  width: 100px;
  margin: 0 auto;
  list-style: none;
  position: absolute;
  bottom: 25px;
  left: 50%;
  margin-left: -50px;
}
.ul-idxs > li {
  float: left;
  width: 15px;
  height: 15px;
  background-color: aliceblue;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
}
.ul-idxs > .active {
  background-color: blue;
}
.btn-left,
.btn-right {
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.btn-left {
  left: 20px;
  background-image: url("../../assets/image/carousel_item/left_ar.png");
}
.btn-right {
  right: 20px;
  background-image: url("../../assets/image/carousel_item/right_ar.png");
}
.btn-left:hover,
.btn-right:hover {
  background-size: 40px 70px;
}
</style>